<template>
	<div class="account-approval">
		<div class="crumbs-wrapper">
			<Crumbs title="系统管理" sub-title="日志管理" />
		</div>
		<div class="main">
			<el-menu default-active="0" mode="horizontal" @select="navTab">
			  <el-menu-item index="0">登录日志</el-menu-item>
			  <el-menu-item index="1">操作日志</el-menu-item>
			  <el-menu-item index="2">异常日志</el-menu-item>
			</el-menu>
			<br>
			<el-row>
				<el-form :inline="true" >
					<!-- 登录日志查询条件 -->
					<template v-if="searchFormData.logType==0"> 
						<el-form-item label="公司名称">
							<el-input v-model="searchFormData.compName" placeholder="请输入名称" clearable></el-input>
						</el-form-item>
						<el-form-item label="账号">
							<el-input v-model="searchFormData.userName" placeholder="请输入内容" clearable></el-input>
						</el-form-item>
						<el-form-item label="操作IP">
							<el-input v-model="searchFormData.userIp" placeholder="请输入内容" clearable></el-input>
						</el-form-item>
						<el-form-item label="请求状态">
							<el-select v-model="searchFormData.reqStatus" placeholder="请选择" clearable>
							    <el-option label="成功" :value="0"/>
							    <el-option label="失败" :value="1"/>
							</el-select>
						</el-form-item>
					</template>
					<!-- 操作日志查询条件 -->
					<template v-if="searchFormData.logType==1">
						<el-form-item label="账号">
							<el-input v-model="searchFormData.userName" placeholder="请输入内容" clearable></el-input>
						</el-form-item>
						<el-form-item label="模块名称">
							<el-input v-model="searchFormData.title" placeholder="请输入内容" clearable></el-input>
						</el-form-item>
						<el-form-item label="请求状态">
							<el-select v-model="searchFormData.reqStatus" placeholder="请选择" clearable>
							    <el-option label="成功" :value="0"/>
							    <el-option label="失败" :value="1"/>
							</el-select>
						</el-form-item>
					</template>
					<!-- 异常日志查询条件 -->
					<template v-if="searchFormData.logType==2">
						<el-form-item label="请求方法">
							<el-input v-model="searchFormData.reqMethod" placeholder="请输入内容" clearable></el-input>
						</el-form-item>
						<el-form-item label="操作时间">
							<el-date-picker v-model="operTimeRange" type="datetimerange" 
								range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"/>
						</el-form-item>
					</template>
					<el-form-item>
						<el-button type="default" @click="reset">重置</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="search">查询</el-button>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" @click="download">下载</el-button>
					</el-form-item>
				</el-form>
			</el-row>
			<el-row>
					<!-- 登录日志 -->
					<template v-if="searchFormData.logType == 0"> 
						<el-table :data="tableData" size="small" v-loading="tableLoading">
							<el-table-column label="集团名称" prop="groupName" align="center" />
							<el-table-column label="公司名称" prop="compName" align="center" />
							<el-table-column label="账号" prop="userName" align="center" />
							<el-table-column label="请求状态" prop="reqStatus" align="center" :formatter="(row)=>{return row.reqStatus==0 ? '成功':'失败'}"/>
							<el-table-column label="操作IP" prop="userIp" align="center" />
							<el-table-column label="登录时长" prop="duration" align="center" />
							<el-table-column label="登录时间" prop="createTime" align="center" />
						</el-table>
					</template>
					<!-- 操作日志 -->
					<template v-if="searchFormData.logType == 1">
						<el-table :data="tableData" size="small" v-loading="tableLoading">
							<el-table-column label="账号" prop="userName" align="center" width="80"/>
							<el-table-column label="模块名称" prop="title" align="center" width="110"/>
							<el-table-column label="请求状态" prop="reqStatus" align="center" width="80" :formatter="(row)=>{return row.reqStatus==0 ? '成功':'失败'}"/>
							<el-table-column label="请求路径" prop="reqPath" align="center" width="290"/>
							<el-table-column label="请求方法" prop="reqMethod" align="center" width="380"/>
							<el-table-column label="请求参数" prop="reqParameter" align="center" width="500"/>
							<el-table-column label="请求时长" prop="duration" align="center" />
						</el-table>
					</template>
					<!-- 异常日志 -->
					<template v-if="searchFormData.logType == 2">
						<el-table :data="tableData" size="small" v-loading="tableLoading">
							<el-table-column label="请求路径" prop="reqPath" align="center" width="220"/>
							<el-table-column label="请求方法" prop="reqMethod" align="center" width="330"/>
							<el-table-column label="请求参数" prop="reqParameter" align="center" width="430"/>
							<el-table-column label="操作IP" prop="userIp" align="center" width="100"/>
							<el-table-column label="操作时间" prop="createTime" align="center" width="150"/>
							<el-table-column label="异常信息" prop="errorDesc" align="center" />
						</el-table>
					</template>
			</el-row>
			<!-- 分页 -->
			<p>
				<el-pagination background layout="total, sizes, prev, pager, next, jumper"
					:current-page="searchFormData.pageNum"
					:page-sizes="[10, 20, 30, 50]"
					:page-size="searchFormData.pageSize"
					:total="searchFormData.total" 
					@size-change="pageSizeChange"
					@current-change="currentPageChange"
				  />
			</p>
		</div>
		
	</div>
</template>

<script>
	export default {
		components: {
		},
		data() {
			return {
				searchFormData: {
					compName: "", //公司名称
					logType: '0' ,// 日志类型：0-登录日志，1-操作日志，2-异常日志
					operBeginTime: "", //操作开始时间
					operEndTime: "", //操作结束时间
					pageNum: 1,
					pageSize: 10,
					reqMethod: "", //请求方法
					reqStatus: "", //请求状态  0-成功 1-失败
					title: "", //模块名称
					userIp: "", //操作IP
					userName: "", //账号名称
					total: 0
				},
				operTimeRange: [], //开始结束时间范围
				tableData: [],
				tableLoading: false //表格加载中
			}
		},
		created() {
			// this.$message.warning('该模块尚未发布')
			this.loadData()
		},
		methods: {
			download() {
				this.$util.download('/api/system/log/export?logType='+this.searchFormData.logType
				+'&compName='+this.searchFormData.compName
				+'&operBeginTime='+this.searchFormData.operBeginTime
				+'&operEndTime='+this.searchFormData.operEndTime
				+'&reqMethod='+this.searchFormData.reqMethod
				+'&reqStatus='+this.searchFormData.reqStatus
				+'&title='+this.searchFormData.title
				+'&userIp='+this.searchFormData.userIp
				+'&userName='+this.searchFormData.userName)
			},
			currentPageChange(pageNum) { //当前页发生变化
				this.searchFormData.pageNum = pageNum
				this.loadData()
			},
			loadData() {
				this.tableLoading = true;
				this.$http({
					url: '/api/system/log/list',
					method: 'POST',
					data: this.searchFormData
				}).then( res => {
					this.tableData = res.data.rows
					this.searchFormData.total = res.data.total
					this.tableLoading = false;
				})
			},
			navTab(index) {
				this.searchFormData.logType = index;
				this.tableData = []
				this.reset()
			},
			pageSizeChange(pageSize) {
				this.searchFormData.pageNum = 1;
				this.searchFormData.pageSize = pageSize
				this.loadData()
			},
			reset() {
				this.searchFormData.compName = ''
				this.searchFormData.operBeginTime = ''
				this.searchFormData.operEndTime = ''
				this.searchFormData.pageNum = 1
				this.searchFormData.pageSize = 10
				this.searchFormData.reqMethod = ''
				this.searchFormData.reqStatus = ''
				this.searchFormData.title = ''
				this.searchFormData.userIp = ''
				this.searchFormData.userName = ''
				this.searchFormData.total = 0
				this.loadData()
			},
			search() {
				this.loadData()
			},
			showUpdateDialog(row) {
				this.editFormData = row;
				this.editDialogVisible = true;
			}
		},
		watch: {
			operTimeRange(newval) {
				if(newval) {
					this.searchFormData.operBeginTime = this.$util.date2string(newval[0]).dateStr;
					this.searchFormData.operEndTime = this.$util.date2string(newval[1]).dateStr;
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.account-approval {
		height: calc(100vh - 100px);
		background-color: #f8f8f8;
		padding: 5px 30px 10px;

		.crumbs-wrapper {}

		.main {
			height: 92%;
			background-color: white;
			overflow-y: auto;
			box-sizing: border-box;
			padding: 0 20px 10px;
		}
	}
</style>
